<template>
	<div class="musicplaylist">
		
		<div class="top">

			<i class="iconfont icon-return" @click="backfind"></i>
			<p >歌单广场</p>

		</div>
		
		<div class="titleall">
			<div class="title">
				<router-link to="/find/musicplaylist/">推荐</router-link>
				<router-link to="/official/">官方</router-link>
				<router-link to="/boutique/">精品</router-link>
				<router-link to="/chinese/">华语</router-link>
				<router-link to="/popular/">流行</router-link>
				<router-link to="/folk/">民谣</router-link>
				<router-link to="/electronic/">电子</router-link>
				<router-link to="/lightmusic/">轻音乐</router-link>
			</div>
			<i class="iconfont icon-liebiao"></i>
			
		</div>
		<div class="line"></div>
		<div>
			<router-view></router-view>
		</div>
		
	</div>
</template>

<script>
	export default{
		methods:{
			backfind(){
				this.$router.push('/find')
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.musicplaylist {
		.top {
			width: 100%;
			display: flex;
			align-items: center;
			padding: vw(10) vw(16);
			display: flex;
			align-items: center;
			i {
				font-size: vw(24);
				
			}
			p {
				
				font-size: vw(18);
				margin-left: vw(4);
			}
		}
		
		.titleall{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 vw(16);
			.title{
				width: 90%;
				overflow-x: scroll;
				white-space: nowrap;
				a{
					margin-right: vw(40);
					color: #333333;
					font-size: vw(16);
					height: vw(30);
					display: inline-block;
				}
				.router-link-exact-active{
				color: red;
				font-weight: bold;
				border-bottom: 2px solid red;
		}
			}
			i{
				font-size: vw(20);
			}
		}
		.line{
			width: 100%;
			height: vw(1);
			background-color: #ddd;
			margin:0 0 vw(10);
		}
	}
</style>